<!-- 旧版 -->
<template>
  <el-table
    ref="multipleTableHan"
    v-loading="loading"
    :header-cell-style="{fontSize:'14px'}"
    :border="border"
    :data="tableData"
    :show-header="showHeader"
    :row-key="getRowKeys"
    :highlight-current-row="highlightCurrentRow"
    :show-summary="showSummary"
    :summary-method="summaryMethod"
    :span-method="spanMethod"
    :stripe="stripe"
    :key="key"
    :max-height="maxHeight"
    @row-click="rowClick"
    @cell-dblclick="cellDblclick"
    @select-all="selectAll"
    @selection-change="handleSelectionChange"
  >
    <hu-table-column
      v-for="item in tableCol"
      @cellDblclick="cellDblclick"
      :item="item"
      :key="item.slot || item.key || item.type"
    >
      <template
        v-if="item.slot"
        v-slot:[item.slot]="{ row, column, $index }"
      >
        <slot
          :name="item.slot"
          :$index="$index"
          :row="row"
          :column="column"
        ></slot>
      </template>
    </hu-table-column>
  </el-table>
</template>

<script>
import huTableColumn from "./huTableColumn.vue";
export default {
  name: "HuTable",
  components: {
    huTableColumn,
  },
  props: {
    // 生成 el-table-column
    tableCol: {
      type: Array,
      default: () => [],
    },
    // 显示的数据
    tableData: {
      type: Array,
      default: () => [],
    },
    // 合并行或列的计算方法
    spanMethod: {
      type: Function,
      default: () => {},
    },
    // 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
    getRowKeys: {
      type: Function | String,
      default: () => {},
    },
    // 是否在表尾显示合计行
    showSummary: {
      type: Boolean,
      default: false,
    },
    // 自定义的合计计算方法
    summaryMethod: {
      type: Function,
      default: () => {},
    },
    // Table 的最大高度。合法的值为数字或者单位为 px 的高度。
    maxHeight: {
      type: String | Number,
      default: "600",
    },
    // 是否显示表头
    showHeader: {
      type: Boolean,
      default: true,
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    // 表格 loading
    loading: {
      type: Boolean,
      default: false,
    },
    // 表格 border
    border: {
      type: Boolean,
      default: false,
    },
    // 是否要高亮当前行
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      key: Math.random(),
    };
  },
  methods: {
    // 默认勾选
    toggleRowSelection(rows) {
      rows.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    },
    // 默认勾选
    clearSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.$emit("selection-change", val);
    },
    // 当某一行被点击时会触发该事件
    rowClick(val) {
      this.$emit("row-click", val);
    },
    // 当某一行被点击时会触发该事件
    selectAll(val) {
      this.$emit("select-all", val);
    },


    // 双击单元格触发事件
    cellDblclick(row, column, cell, event) {
      console.log(row, column);
      // sta ——————————
      // // 避免点击过快导致多个输入框处于焦点状态
      // row[column.property + "Show"] = false;
      // // 避免点击其他单元格导致表格刷新
      // // if (!['address'].includes(column.property)) return
      // row[column.property + "Show"] = true;
      // this.updateTable();
      // end ——————————
      this.$emit("cell-dblclick", row, column, cell, event);
    },
    resetShow(row, column) {
      row[column.property + "Show"] = false;
      this.updateTable();
    },
    //更新表格
    updateTable() {
      this.key = Math.random();
    },
  },
};
</script>

<style scoped>
</style>
